<!--
 * Copyright ©
 * #
 * @author: zw
 * @date: 2024-01-17
 -->

<template>
  <div>
    <div class="shape" v-for="shape in iconShapes" :key="shape.id">
      <div class="shape-header">{{ shape.header }}</div>

      <hr class="my-2.5" />

      <ul class="grid grid-rows-3 grid-cols-3 gap-2">
        <li draggable="true" @dragstart="dragstart($event, item)" v-for="item in shape.icon" :key="item.command" :class="['iconfont', item.iconName]">
          <div class="flex justify-center hover:bg-gray-400 hover:text-white" v-html="item.path" :title="item.text"></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import iconShapes from "./icon";
export default {
  name: "toolbar",
  data() {
    return {
      iconShapes,
    };
  },

  mounted() {},

  methods: {
    dragstart(e, item) {
      e.dataTransfer.setData("addShape", JSON.stringify(item));
    },
  },
  //  End
};
</script>

<style lang="css" scoped></style>
